<template>
  <div class="parcel">
    <div class="clock">
      <div class="time">{{dateFormat(newDate)}}</div>
    </div>
    <div class="computer">
      <div class="computer-parcel" style="position: absolute;top: 190px;left: 126px">
        <div class="planTime" style="float: left">
          <div>计划学习时长:</div>
          <div class="duration">
            <el-input class="hourAndMinute" oninput="value=value.replace(/[^\d]/g,'')" v-model="planTime.hour" @blur="correct('hour')" />小时<el-input class="hourAndMinute"oninput="value=value.replace(/[^\d]/g,'')" v-model="planTime.minute" @blur="correct('minute')" />分钟</div>
          <div>当前学习时长:</div>
          <div class="duration">{{ actualTime.hour<10?'0'+actualTime.hour:actualTime.hour }}小时{{ actualTime.minute<10?'0'+actualTime.minute:actualTime.minute }}分钟</div>
        </div>
        <div style="border-left: black solid 3px;height: 200px;float: left;margin-left: 60px"></div>
        <div style="margin:0 0 0 84px;float: left;position: relative">
          <div class="completedProgress">完成进度：</div>
          <el-progress type="circle" style="margin: 12px 0px 0px -40px;" :percentage="percentage"  ></el-progress>
        </div>
      </div>
    </div>
    <div class="backlog">
      <div class="title">
        <el-input
            placeholder="请输入待办："
            v-model.trim="input"
            clearable
            @keyup.enter.native="addBacklog"
        />
      </div>
      <el-divider></el-divider>
      <div class="content">
        <el-empty v-if="!task||task.length==0" description="暂无任务"></el-empty>
        <template v-for="(item,index) in task" >
          <div :key="index" v-if="taskStartEnd.start<=index&&taskStartEnd.end>=index"  >
            <el-input
                class="input"
                style="margin-bottom: 20px"
                readonly
                @mouseover.native="showBtn(item.id)"
                @mouseleave.native="hiddenBtn(item.id)"
                v-model="item.content">
              <el-button  slot="suffix" type="danger" size="medium" v-if="item.show" @click.native="deleteTask(item.id)" >删除</el-button>
            </el-input>
          </div>
        </template>
        <div class="tentativePlay">
          <i class="el-icon-video-pause" style="font-size: 40px;" v-if="status" @click="suspended" ></i>
          <i class="el-icon-video-play" style="font-size: 40px;" v-if="!status" @click="continueTo" ></i>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
              layout="prev, next"
              :page-size="6"
              :total=task.length
              @prev-click="current--"
              @next-click="current++"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { v4  } from 'uuid'
import storage from "@/stock/storage";
export default {
  name: 'Start',
  data() {
    return {
      // 当前时间
      newDate: new Date(),
      input:'',
      task:[],
      current:0,
      alls:0,
      planTime:{
        hour:'04',
        minute:'00',
      },
      actualTime:{
        hour:0,
        minute: 0
      },
      // time:new Date().valueOf(),
      status:true
    }
  },
  methods:{
    // 封装计时
    start(){
      this.alls = this.alls + 1
      console.log(this.alls)
      let minute = parseInt(this.alls/60)
      let hour = parseInt(minute/60)
      this.actualTime.hour = hour
      this.actualTime.minute = minute
    },
    // 时间
    dateFormat () {
      const date = new Date()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return  hours + ':' + minutes
    },
    // 添加代办任务
    addBacklog(){
      if(this.input.length<=0) return alert('内容不能为空！')
      const id = v4()
      const item={
        id:id,
        content:this.input,
        show:false
      }
      this.task.push(item)
      this.input=''
      localStorage.setItem("loadComments",JSON.stringify(this.task));
    },
    // 创建或获取localstorage
    loadComments(){
      const task = localStorage.getItem("loadComments");
      if(task==undefined){
        localStorage.setItem('loadComments',"")
      }
      this.task=JSON.parse(task) || []
    },
    // 显示删除按钮
    showBtn(id){
        this.task.forEach(ele=>{
          if(ele.id==id){
            ele.show=true
          }
        })
    },
    // 隐藏删除按钮
    hiddenBtn(id){
      this.task.forEach(ele=>{
        if(ele.id==id){
          ele.show=false
        }
      })
    },
    deleteTask(id){
       this.task = this.task.filter((item)=>{
           return item.id!=id
       })
      // 判断，重新渲染序列
      if(this.task.length%6==0){
        this.current=this.task.length/6 - 1
      }
      // 清除
      localStorage.clear()
      // 重新放待办
      let task = JSON.stringify(this.task)
      localStorage.setItem('loadComments',task)
    },
    // 矫正时间格式
    correct(time){
      if(time=='hour'){
        this.planTime.hour=this.planTime.hour.length<2?'0'+this.planTime.hour:this.planTime.hour
      } else if(time=='minute') {
        this.planTime.minute =this.planTime.minute.length < 2 ? '0' + this.planTime.minute:this.planTime.minute
      }
    },
    // 暂停
    suspended() {
      this.status=false
      clearInterval(this.currentTimer)
      this.$notify({
        title: '提示',
        message: '学习已暂停~',
        duration: 5000,
      });
    },
    // 继续
    continueTo(){
      this.status=true
      let that = this
      this.time=new Date().valueOf()
      this.currentTimer = setInterval(()=>{that.start()},1000)
      this.$notify({
        title: '提示',
        message: '继续学习！',
        duration: 5000,
      });
    }
  },
  computed:{
    // 显示的列表标识
    taskStartEnd(){
      const  start=this.current*6
      const end=start+5
      return {start ,end}
    },
    // 学习进度百分比
    percentage() {
      let planAllMinute = Number(this.planTime.hour)*60+Number(this.planTime.minute)
      let actualAllMinute = this.actualTime.hour*60 + this.actualTime.minute
      let percentage = parseInt((actualAllMinute / planAllMinute) * 100)
      return percentage
    }
  },
  mounted () {
    // 取当天已学习时长
    let validity = storage.get('validity')
    this.alls = validity === null ? 0 : validity.item
    // 挂载时间
    let that = this
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString()
    })
    // 计时
    this.currentTimer = setInterval(()=>{that.start()},1000)
    this.loadComments()
  },
  // 销毁时清除计时器
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
    clearInterval(this.currentTimer)
    // 退出时保存学习时长
    storage.set('validity',this.alls)
  },
}
</script>

<style  lang="less" scoped>
@import "../style/font/fonts.css";
.parcel {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(~@/assets/images/桌面.jpg) no-repeat;
  background-size: 100% 100%;
}

.clock {
  position: absolute;
  top: 350px;
  width: 648px;
  height: 648px;
  background-image: url(~@/assets/images/时钟.png);
  .time {
    position: absolute;
    top: 327px;
    left: 178px;
    font-size: 100px;
    font-family: 'digifaw';
    color: #77e18c;
    /*background-color: deeppink;*/
  }
}
.computer {
  position: absolute;
  top: 200px;
  left: 1250px;
  width: 700px;
  height: 700px;
  background: url(~@/assets/images/电脑2.png) no-repeat;
  background-size: 100% 100%;
  .duration {
    margin: 15px 0;
    font-size: 30px;
    font-weight: 700;
    font-family: 等线;
    .hourAndMinute{
      width: 35px;
      font-size: 30px;
      font-weight: 700;
      font-family: 等线 !important;
      font-weight: 700 !important;
    }
    /deep/ .el-input__inner {
      padding: 0 0 !important;
      background-color: transparent !important;
      border: 0;
      color: #000000 !important;
      text-align:right
    }
  }
  .completedProgress {
    position: absolute;
    top: 73px;
    left: 15px;
  }
  /deep/ .el-progress-circle {
    height: 213px !important;
    width: 177px !important;
  }
}

.backlog {
  position: absolute;
  top: 120px;
  left: 600px;
  width: 650px;
  height: 500px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  background: url(~@/assets/images/纸.png) no-repeat;
  background-size: 100% 100%;
  .content{
    width: 630px;
    height: 388px;
    .tentativePlay {
      position: absolute;
      bottom: 5px;
      left: 10px;
    }
  }
  .block{
    position: absolute;
    bottom: 4px;
    right: 7px;
  }
}
/deep/ .title .el-input--suffix .el-input__inner {
  padding-right: 52px;
  height: 60px;
  font-size: 30px;
  font-weight: 700;
}
/deep/ .el-divider--horizontal {
  margin: 14px 0 20px 0 !important;
}
</style>
